<template>
  <view class="todo">
    <view :class="{calendar:true, expand: isExpand}">
      <uni-calendar :class="{'todo-calendar': true }" ref="calendar" @change="change">
        <text slot="header" class="todo-calendar__expand" @click="changeExpand">{{ isExpand ? '收起' : '展开' }}</text>
      </uni-calendar>
    </view>
    <view class="card-list">
      <pane-card v-for="(item, index) in todoList" :key="index">
        <view class="subtitle" slot="subtitle">
          <text class="time block">{{ item.time }}</text>
          <text class="desc">{{ item.desc }}</text>
        </view>
        <view 
          :class="{
            tag: true,
            warning: item.status === 0,
            success: item.status === 1,
            error: item.status === 2
          }"
          slot="right">
          <text>{{ tagsMap[item.status] }}</text>
        </view>
      </pane-card>
    </view>
    <v-empty :isShow="!todoList.length && showEmpty" text="暂无相关记录"></v-empty>
    <picker range-key="label" :range="riskTyleList" @change="handFabTap">
      <view class="content">
        <!-- <view class="btn-icon error">
          <m-icon type="paperplane"></m-icon>
        </view> -->
        <uni-fab v-if="showAddBtn"></uni-fab>
        <!-- <text>转运申请</text> -->
        <!-- <text>预计解除隔离日期</text> -->
      </view>
    </picker>
  </view>
</template>
<script>
  import { mapState, mapMutations } from 'vuex';
  import PaneCard from '@/components/m-card/pane-card.vue';
  import VEmpty from '@/components/v-empty/index.vue';
  import Api from '@/api/main';
  export default {
    components: {
      PaneCard,
      VEmpty
    },
    data() {
      return {
        showEmpty: false,
        tagsMap: ['未开始', '进行中', '已超时'],
        date: '',
        isExpand: false,
        todoList: [
          // {
          //   time: '11:00-12:00',
          //   desc: 'xxxx需要采样100份xxxx需要采样100份xxxx需要采样100份xxxx需要采样100份xxxx需要采样100份',
          //   status: 0
          // },
          // {
          //   time: '11:00-12:00',
          //   desc: 'xxxx需要采样100份',
          //   status: 1
          // },
          // {
          //   time: '11:00-12:00',
          //   desc: 'xxxx需要采样100份',
          //   status: 2
          // }
        ],
        riskTyleList: [
          // {
          //   id: 1,
          //   label: '密接'
          // },
          // {
          //   id: 2,
          //   label: '次密'
          // }
        ]
      };
    },
    computed: {
      ...mapState(['user']),
      showAddBtn() {
        return this.user && !!this.user.showAddBtn
      }
    },
    methods: {
      changeExpand() {
        this.isExpand = !this.isExpand
      },
      getTagStatusCls(status) {
        return {
          tag: true,
          warning: status === 0,
          success: status === 1,
          error: status === 2
        };
      },
      change(val = {}) {
        const { fulldate } = val;
        this.date = fulldate;
        console.log('fulldate', fulldate);
        this.getList();
      },
      handFabTap(val) {
        // 先选择风险等级
        console.log('handFabTap', val);
        if (!this.riskTyleList || !this.riskTyleList.length) {
          return
        }
        const { value: index } = val.detail
        const value = this.riskTyleList[index]
        console.log('risk-value', value);
        uni.navigateTo({
          url: `/pages/main/todo/add-risk?risk=${value.id}`
        });
      },
      // 获取证件类型
      async getCondition() {
        const res = await this.$http.post(Api.getCondition);
        if (res && res.riskType) {
          this.riskTyleList = res.riskType
        }
      },
      async getList() {
        uni.showLoading({
          title: '加载中...'
        });
        const list = await this.$http.post(Api.getTodoList, { date: this.date });
        console.log('list', list);
        this.todoList = list || [];
        this.showEmpty = !this.todoList.length;
        uni.hideLoading();
      }
    },
    created() {
      this.getCondition()
    },
    mounted() {
      const calendar = this.$refs.calendar;
      calendar && calendar.change();
      console.log('user', this.user);
    }
  };
</script>
<style lang="scss">
  .todo {
    width: 100%;

    .calendar {
      margin-bottom: 20rpx;
      height: 108rpx;
      overflow: hidden;
      &.expand {
        height: auto;
        overflow: auto;
      }
    }

    .time {
      color: $uni-sub-text-color;
    }

    .desc {
      color: $uni-text-color;
    }

    .tag {
      padding: 4rpx 4rpx;
      width: 110rpx;
      text-align: center;
      border-radius: 16rpx;

      &.success {
        color: $uni-color-success;
        background-color: rgba($color: $uni-color-success, $alpha: 0.2);
      }

      &.warning {
        color: $uni-color-warning;
        background-color: rgba($color: $uni-color-warning, $alpha: 0.2);
      }

      &.error {
        color: $uni-color-error;
        background-color: rgba($color: $uni-color-error, $alpha: 0.2);
      }
    }

    &-calendar {
      &__expand {
        position: relative;
        // top: 12px;
        left: -20px;
        bottom: 2px;
        padding: 0 15px;
        width: 108rpx;
        text-align: center;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        border-radius: 25px;
        color: $uni-color-primary;
        background-color: rgba($color: $uni-color-primary, $alpha: 0.2);
      }
    }
  }
</style>